<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org"
       xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/index.css">
    <script type="text/javascript" async="" src="/js/jquery-1.11.0.min.js"></script>
    <title>Title</title>

</head>
<body>

<!-- header start -->
<div class="header" th:fragment="topbar">
    <div class="header-ct">
        <a href="/index" class="logo">
            <span style="display: inline-block;vertical-align: middle;height: 36px;width: 36px;"><img src="/img/icon-logo.png" style="width: 100%;height: 100%;"/></span>
        </a>
        <div class="nav">
            <ul class="clearfix">
                <li><a href="/topic">专辑</a></li>
                <li><a href="/essay">随笔</a></li>
                <li><a href="/story">故事</a></li>
                <li><a href="/event">活动</a></li>
                <li sec:authorize="isAuthenticated()"><a href="#" th:href="'/user/favoriteTopic?userId='+${session.user.id}" >收藏</a></li>
                <li><a href="/admin/topic?userId=0" sec:authorize="hasRole('ROLE_ADMIN')">稿件管理</a></li>
                <li><a href="/admin/categoryAndCity" sec:authorize="hasRole('ROLE_ADMIN')">分类管理</a></li>
                <li><a href="/contribute/topicContribute" sec:authorize="hasRole('ROLE_ADMIN')">投稿</a></li>
            </ul>

        </div>

        <div class="head-search">
            <form class="search-form" action="/search" id="headSearchForm">
                <input type="text" class="search-input" name="keyword" autocomplete="off">
                <input type="hidden" name="filtrate" value="topic">
                <button class="search-btn" type="submit">
                    <span class="icon-search"></span>
                </button>
            </form>
        </div>

        <!-- login-wrapper-->

       <!-- <ul class="float-right navbar-nav">//这是上一个项目的登录与用户信息判断切换显示的代码
            <li  class="nav-item">
                <div class="row" id="user">
                    <img id="userHeadImg" class="rounded-circle figure-img" src="\images\testhead.jpg" alt="头像"  sec:authorize="isAuthenticated()"  />
                    <a id="login" href="/login" class="nav-link" th:if="${null == session.user }" sec:authorize="isAnonymous()" >登录</a>
                    <a id="register" href="/common/register/registerUserPage" class="nav-link"  sec:authorize="isAnonymous()" >注册</a>
                    <a id="userCenter" href="#" class="nav-link" sec:authorize="isAuthenticated()" sec:authentication="name" ></a>
                    <a id="exit"href="/logout" class="nav-link" sec:authorize="isAuthenticated()" >安全退出</a>
                </div>
            </li>
        </ul>-->

        <!--用户没登录时-->
        <div class="login "
             style="display: block;"  sec:authorize="isAnonymous()" >
            <a  href="/login" id="theme-login" rel="nofollow"  > 注册/登录 </a>
        </div>

        <!--当用户登录后-->
        <div class="logged-in-wrapper" id="loggedInWrapper" style="display: block;" sec:authorize="isAuthenticated()">
            <a href="javascript:;" rel="nofollow" class="ln-message" data-width="270" data-adjusty="-10">
                <span class="icon-message"></span>
            </a>

            <div class="account-more">
                <a href="javascript:;" rel="nofollow" class="ln-account" id="lnAccountMore" data-ct="accountMoreWrapper" data-show="mouseenter" data-tipid="accountMoreDialog" data-adjusty="-10"

                >
                    <!--注意这里是在session中查询user-->
                    <img src="/img/test/testUserHead.jpg"  alt="京馆长" class="avatar"  th:src="${session.user.imgAddr}">
                    [[${session.user.nickname}]]
                </a>
                <!--sec:authentication="name"   th:if="${null != session.user}"-->
                <div id="accountMoreWrapper" style="display: none;">
                    <div class="account-links rounded" id="accountLinks">
                        <a class="account-link link-uc" href="/user/1405418" th:href="'/user/topic?userId='+${session.user.id}" rel="nofollow">
                            <span class="icon-account"></span>我的主页
                        </a>
                        <a class="account-link link-setting" href="/user/editInfo"  rel="nofollow">
                            <span class="icon-setting"></span>账号设置
                        </a>
                        <a class="account-link link-logout" href="/logout" rel="nofollow">
                            <span class="icon-logout"></span>退出
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--当用户登录之后,点击用户名显示选项面板,这是为了解决手动端用户没有鼠标指针导致选项面板无法触发的问题-->
    <script type="text/javascript">
        $("body").on("click", "#lnAccountMore", function () {
            $(this).tip()
        })
    </script>

    <!--点击导航条右上角弹出登录框或注册框,登录框和注册框之间可以互相切换-->
    <!--<script type="text/javascript">
        $(document).ready(function ($) {
            $('#theme-login').click(function () {
                $('#qtip-headLoginDialog').show();
            })
            $('#login-close').click(function () {
                $('#qtip-headLoginDialog').hide();
            })
            $('#btn-dialog-register').click(function () {
                $('#qtip-headLoginDialog').hide();
                $('#qtip-registerDialog').show();
            })
            $('#btn-dialog-login').click(function () {
                $('#qtip-registerDialog').hide();
                $('#qtip-headLoginDialog').show();
            })
        });
    </script>-->


    <!-- logged-in-wrapper -->
    <!--  <div class="logged-in-wrapper" id="loggedInWrapper" style="display: block;">
          <a href="javascript:;" rel="nofollow" class="ln-message" id="lnMessage" data-show="mouseenter" data-remote="http://www.luoo.net/message/latest" data-tipid="messageDialog" data-width="270" data-adjusty="-10">
              <span class="icon-message"></span>
          </a>

          <div class="account-more">
              <a href="javascript:;" rel="nofollow" class="ln-account" id="lnAccountMore" data-ct="accountMoreWrapper" data-show="mouseenter" data-tipid="accountMoreDialog" data-adjusty="-10">
                  <img src="./京馆长_files/avatar.gif" alt="京馆长" class="avatar">
                  京馆长	</a>
              <div id="accountMoreWrapper" style="display: none;">
                  <div class="account-links rounded" id="accountLinks">
                      <a class="account-link link-uc" href="http://www.luoo.net/user/1405418" rel="nofollow">
                          <span class="icon-account"></span>我的落网
                      </a>
                      <a class="account-link link-setting" href="http://www.luoo.net/user/profile" rel="nofollow">
                          <span class="icon-setting"></span>账号设置
                      </a>
                      <a class="account-link link-logout" href="http://www.luoo.net/user/logout" rel="nofollow">
                          <span class="icon-logout"></span>退出
                      </a>
                  </div>
              </div>
          </div></div>

      -->
    <!--登录弹出框-->
    <!--<div id="qtip-headLoginDialog" class="qtip qtip-default qtip-luoo qtip-pos-tc qtip-focus" tracking="false"
         role="alert" aria-live="polite" aria-atomic="false" aria-describedby="qtip-headLoginDialog-content"
         aria-hidden="false" data-qtip-id="headLoginDialog"
         style="width: 235px; z-index: 15001; display: none; top: 52px; left: 900px;">
        <div class="qtip-tip"
             style="background-color: transparent !important; border: 0px !important; width: 8px; height: 8px; line-height: 8px; left: 50%; margin-left: -4px; top: -8px;">
            <canvas style="background-color: transparent !important; border: 0px !important; width: 8px; height: 8px;"
                    width="8" height="8"></canvas>
        </div>
        <div class="qtip-content" id="qtip-headLoginDialog-content" aria-atomic="true">
            <div class="dialog-passport">
                <div class="dialog-head">
		<span class="title">
			登录
		</span>
                    <a href="javascript:;" rel="nofollow" class="ln-reg " id="btn-dialog-register" data-tipid="registerDialog"
                       data-remote="register" data-width="235">
                        注册
                    </a>
                    <span class="fright">没有账号？</span>
                </div>
                <form class="form-ajax" action="/login" method="post">
                    <div class="inline-input">
                        <span class="label">邮箱</span>
                        <input type="text" class="input-passport" name="username" required="">
                    </div>
                    <div class="inline-input">
                        <span class="label">密码</span>
                        <input type="password" class="input-passport" name="password" required="">
                    </div>
                    <div class="clearfix">
                        <label><input type="checkbox" name="remember"> 下次自动登录</label>
                        <a href="/login/forgot" rel="nofollow" class="ln-resetpwd">找回密码</a>
                    </div>
                    <div class="btn-wrapper">
                        <button type="submit"  class="btn btn-positive rounded" >
                            登录
                        </button>

                        <span class="btn btn-positive btn-login-msg rounded" style="display:none;">
				            提示
			            </span>
                        <br/>
                        <a href="javascript:;" id="login-close" class="btn btn-positive  rounded" rel="nofollow">
                            取消
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>-->

    <!--注册弹出框-->
   <!-- <div id="qtip-registerDialog" class="qtip qtip-default qtip-luoo qtip-pos-tc qtip-focus" tracking="false"
         role="alert" aria-live="polite" aria-atomic="false" aria-describedby="qtip-registerDialog-content"
         aria-hidden="false" data-qtip-id="registerDialog"
         style="width: 235px; z-index: 15002; display: none; top: 52px; left: 900px;">
        <div class="qtip-tip"
             style="background-color: transparent !important; border: 0px !important; width: 8px; height: 8px; line-height: 8px; left: 50%; margin-left: -4px; top: -8px;">
            <canvas style="background-color: transparent !important; border: 0px !important; width: 8px; height: 8px;"
                    width="8" height="8"></canvas>
        </div>
        <div class="qtip-content" id="qtip-registerDialog-content" aria-atomic="true">
            <div class="dialog-passport">
                <div class="dialog-head">
                <span class="title">
                    注册
                    &lt;!&ndash;<img style="display: none;" width="1" height="1" src="http://www.luoo.net/register/vild_shit"/>&ndash;&gt;
                </span>
                    <a href="javascript:;" class="ln-login " id="btn-dialog-login" data-tipid="loginDialog"
                       data-remote="/login/dialog" data-width="235">
                        返回登录
                    </a>
                </div>
                <form id="register_form" action="/register">
                    <div class="inline-input">
                        <span class="label">昵称</span>
                        <input type="text" name="name" class="input-passport" autocomplete="off"
                               placeholder="14位以内中英文数字" required="">
                        <input type="hidden" name="_h" value="a953b6733a2a9398a15b96818b47c369">
                    </div>
                    <div class="inline-input">
                        <span class="label">邮箱</span>
                        <input type="text" name="email" class="input-passport" autocomplete="off" required=""
                               placeholder="您的常用邮箱">
                    </div>
                    <div class="inline-input">
                        <span class="label">密码</span>
                        <input type="password" class="input-passport" name="password" autocomplete="off" required=""
                               placeholder="6-16个字符">
                    </div>

                    <div class="inline-input">
                        <span class="label">验证码</span>
                        <input type="text" name="code" class="input-sort" autocomplete="off" required="">
                        <img src="" data-src="" alt="验证码"
                             class="">
                    </div>

                    <div class="rule-wrapper">
                        <input type="checkbox" name="rule" checked="" required="">
                        同意
                        <a target="_blank" href="/term">《使用协议》</a>
                    </div>
                    <div>
                        <a href="javascript:;" class="btn btn-positive btn-register-submit rounded" rel="nofollow">
                            注册
                        </a>
                        <span class="btn btn-positive btn-register-msg rounded" style="display:none;">
                        提示
                    </span>
                    </div>
                </form>
            </div>
        </div>
    </div>-->


</div>


<!--/// header end -->
</body>
</html>